<template lang="html">
  <div class="">
      <div class="t_header">
        <el-form :inline="true" :model="formInline" label-width="80px" class="demo-form-inline">
          <el-form-item label="类型">
            <el-select v-model="formInline.select" placeholder="选择类型">
              <el-option label="油品" value="1"></el-option>
              <el-option label="养护品" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="el_button" @click="onSubmit()">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="body">
        <el-table :data="tableData.list" style="width: 100%">
          <el-table-column prop="sm_name" label="供应商名称" align="center">
                <template slot-scope="scope">
                    <el-popover placement="right" trigger="hover" @show="getUserInfo(scope.row)">
                      <p><img class="user_avatar" :src="userInfo.head_pic" alt=""></p>
                      <p>姓名：{{userInfo.name}}</p>
                      <p>手机号：{{userInfo.phone}}</p>
                      <el-tag slot="reference" style="cursor:pointer" type="primary">{{scope.row.sm_name}}</el-tag>
                    </el-popover>
                </template>
          </el-table-column>
          <el-table-column prop="create_time" label="申请时间" align="center"></el-table-column>
          <el-table-column label="区域" align="center">
              <template slot-scope="scope">
                  <el-popover placement="bottom" trigger="hover">
                    <p v-for="(item,index) in scope.row.area" :key="index">{{item.province}}-{{item.city}}</p>
                    <el-button slot="reference" size="small" type="primary" class="name-wrapper" plain>{{scope.row.area.length}}</el-button>
                  </el-popover>
              </template>
          </el-table-column>
          <el-table-column label="种类" align="center">
            <template slot-scope="scope">
                <p v-if="scope.row.type == 1">油品</p>
                <p v-if="scope.row.type == 2">养护品</p>
            </template>
          </el-table-column>
          <el-table-column label="物料结算额" align="center">
              <template slot-scope="scope">
                  <el-button  @click="onShow(scope.row)" type="text" size="small">{{scope.row.money}}</el-button>
              </template>
          </el-table-column>
          <el-table-column label="运费金额" align="center">
              <template slot-scope="scope">
                  <el-button  @click="onShow(scope.row)" type="text" size="small">{{scope.row.freight}}</el-button>
              </template>
          </el-table-column>
          <el-table-column prop="total_money" label="总金额" align="center"></el-table-column>
          <el-table-column label="发票" align="center">
                <template slot-scope="scope">
                    <img :src="scope.row.tax" :preview="scope.row.tax" class="preview-img" alt="">
                </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button @click="pass(scope.row)" type="text" size="small">通过</el-button>
                <el-button @click="reject(scope.row)" type="text" size="small">驳回</el-button>
              </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev, pager, next"
          :page-count="tableData.rows"
           @current-change="changePage" align="center">
        </el-pagination>
      </div>


      <el-dialog title="驳回理由" :visible.sync="centerDialogVisible" width="30%" center>
         <el-input slot="" type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
         <span slot="footer" class="dialog-footer">
             <el-button @click="centerDialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="rejectConfirm">确 定</el-button>
         </span>
      </el-dialog>

      <el-dialog title="通过" :visible.sync="dialogVisible" width="30%" center>
           <div class="select" >
               <el-form label-width="100px" :model="formLabelAlign">
                     <el-form-item label="金额">
                       <el-input disabled v-model="formLabelAlign.money"></el-input>
                     </el-form-item>
                     <el-form-item label="运费">
                       <el-input v-model="formLabelAlign.freight"></el-input>
                     </el-form-item>
                     <el-form-item label="总金额">
                       <el-input disabled :value="Number(formLabelAlign.freight)+Number(formLabelAlign.money)" />
                     </el-form-item>
               </el-form>
           </div>
           <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="insertDialog">确 定</el-button>
           </span>
      </el-dialog>

      <el-dialog :visible.sync="dialogTableVisible2">
          <el-table :data="cursData">
              <el-table-column property="time" label="时间" align="center"></el-table-column>
              <el-table-column property="goods_name" label="名称" align="center"></el-table-column>
              <el-table-column property="stand" label="规格" align="center"></el-table-column>
              <el-table-column label="运费图片" align="center">
                  <template slot-scope="scope">
                        <img :src="scope.row.freight_pic" class="preview-img" :preview="scope.row.freight_pic" alt="">
                  </template>
              </el-table-column>
              <el-table-column property="freight" label="运费金额" align="center"></el-table-column>
          </el-table>
      </el-dialog>


      <el-dialog :visible.sync="dialogTableVisible">
            <el-table :data="oilsData">
              <el-table-column label="油品名称" align="center">
                  <template slot-scope="scope">
                      <p v-for="(item,k) in scope.row.detail" :key="k">{{item.materiel}}</p>
                  </template>
              </el-table-column>
              <el-table-column label="数量" align="center" width="80">
                  <template slot-scope="scope">
                      <p v-for="(item,k) in scope.row.detail" :key="k">{{item.num}}</p>
                  </template>
              </el-table-column>
              <el-table-column label="结算金额" align="center" width="80">
                  <template slot-scope="scope">
                      <p v-for="(item,k) in scope.row.detail" :key="k">{{item.settlement_price}}</p>
                  </template>
              </el-table-column>
              <el-table-column label="运费图片" align="center">
                  <template slot-scope="scope">
                        <img :src="scope.row.freight_pic" class="preview-img" preview="0" alt="">
                  </template>
              </el-table-column>
              <el-table-column property="freight" label="运费金额" width="80" align="center"></el-table-column>
              <el-table-column property="time" label="时间" align="center"></el-table-column>
            </el-table>
      </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      formInline:{},
      tableData:[],
      userInfo:{},
      oilsData:[],
      cursData:[],
      centerDialogVisible: false,
      dialogVisible:false,
      dialogTableVisible: false,
      dialogTableVisible2: false,
      textarea:"",
      formLabelAlign:{},
      showType:null,
      currentRow:null
    }
  },
  created(){
    this.onSubmit()
  },
  methods:{
    onSubmit(page = 1){
      this.$http2.smApplyCashList({
        type: this.formInline.select,
        page:page
      }).then(res=>{
        this.tableData =
        res.data.code == 1 ?
        res.data.data : []
      })
    },
    changePage(e){
      this.onSubmit(e)
    },
    pass(e){
        this.currentRow = this.formLabelAlign = e;
        this.dialogVisible = true;
    },
    insertDialog(){
      this.$http2.cashHandle({
        id: this.currentRow.id,
        total_money: Number(this.formLabelAlign.freight) + Number(this.formLabelAlign.money)
      }).then(res=>{
        if(res.data.code == 1){
          this.$message.success(res.data.msg)
          this.dialogVisible = false;
          this.onSubmit()
        }else{
          this.$message.error(res.data.msg)
          this.dialogVisible = false;
        }
      })
    },
    reject(e){
      this.currentRow = e;
      this.centerDialogVisible = true;
    },
    rejectConfirm(){
      this.$http2.cashReject({
        id: this.currentRow.id,
        reason: this.textarea,
        sm_id: this.currentRow.sm_id
      }).then(res=>{
        if(res.data.code == 1){
          this.$message.success(res.data.msg)
          this.centerDialogVisible = false;
          this.onSubmit()
        }else{
          this.$message.error(res.data.msg)
          this.centerDialogVisible = false;
        }
      })
    },
    onShow(e){
        this.showType = e.type;
        this.$http2.getCashDetail({
          sm_id: e.sm_id,
          type: e.type,
          id: e.id
        })
        .then(res=>{
          if (e.type == 1 && res.data.code == 1) {
            this.oilsData = res.data.data;
          } else if (e.type == 2 && res.data.code == 1) {
            this.cursData = res.data.data;
          } else {
            this.oilsData = this.cursData = [];
          }
          e.type == 1 ? this.dialogTableVisible = true : this.dialogTableVisible2 = true;
        })
    },
    getUserInfo(e){
      this.$http2.getSmUserInfo({
        sm_id:e.sm_id
      }).then(res=>{
        this.userInfo = res.data.data
      })
    }

  }
}
</script>

<style lang="css" scoped>
.user_avatar{
  width: 50px;
  height: 50px;
  border-radius: 100%;
  display: block;
}
.name-wrapper{
  cursor: pointer
}
.preview-img{
  display: block;
  width: 100%;
  height: 30px;
}
</style>
